<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4">
        <div style="text-align: center">
          <div>
            <el-tag style="width: 120px;font-size: 20px;color: white" :color="color[data.majorType]">No.{{ index }}</el-tag>
          </div>
          <div
            :style="{
              color:color[data.majorType]
            }"
          >
            <div style="border: #d7dae2 1px solid;margin-top: 5px;text-align: center;width: 100px;margin-left: auto;margin-right: auto;">
              <div style="font-size: 20px;margin-left: auto;margin-right: auto;">
                <div>{{ (data.probability * 100).toFixed(0) }}%</div>
                <div v-if="data.majorType === 0">默认</div>
                <div v-if="data.majorType === 1">冲刺</div>
                <div v-if="data.majorType === 2">争取</div>
                <div v-if="data.majorType === 3">稳求</div>
                <div v-if="data.majorType === 4">保底</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="20">
        <div>
          <h3>{{ data.majName }}</h3>
        </div>
        <el-row :gutter="20">
          <el-col :span="4">{{ data.majorNumber }}</el-col>
          <el-col :span="4">综合评分 {{ data.totalPoint }}</el-col>
          <el-col :span="4">学科评分 {{ data.majorRank }}</el-col>
          <el-col :span="4">2019年招生计划 {{ data.enrollmentPlan?data.enrollmentPlan:'-' }}</el-col>
          <el-col :span="4">学费 {{ data.tuition ? data.tuition: '-' }} 元/年</el-col>
          <el-col :span="4">学制 {{ data.regime ? data.regime: '-' }} 年</el-col>
        </el-row>
      </el-col>
    </el-row>
    <div style="height: 15px;" />
    <el-row :gutter="20">
      <el-col :span="10" :xs="12" :sm="8" :lg="12">
        <div style="width: 100%;">
          <RadarChart :cid="data.majName + index" :data="chartData" :title="chartTitle" />
        </div>
      </el-col>
      <el-col :span="12" :xs="12" :sm="16" :lg="12">
        <ResultTable :data="majorScores" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ResultMajor',
  components: {
    ResultTable: () => import('./ResultMajorTable'),
    RadarChart: () => import('./Radar')
  },
  props: {
    data: {
      type: [Object],
      required: true
    },
    scores: {
      type: [Array],
      required: true
    },
    index: {
      type: [Number],
      required: true
    }
  },
  data() {
    return {
      color: {
        0: '#F17467',
        1: '#F17467',
        2: '#FCC83C',
        3: '#89CC4E',
        4: '#597FF5'
      }
    }
  },
  computed: {
    majorScores() {
      return this.scores.filter((v) => {
        return v.major_name === this.data.majName
      })
    },
    chartTitle() {
      return [
        {
          name: '职业性格',
          max: 5
        },
        {
          name: '专业要求',
          max: 5
        },
        {
          name: '学科实力',
          max: 5
        },
        {
          name: '分数吻合',
          max: 5
        },
        {
          name: '录取稳定',
          max: 5
        }
      ]
    },
    chartData() {
      return [
        this.data.characterMatchPoint,
        this.data.majorHitPoint,
        this.data.majorStrengthPoint,
        this.data.scoreMatchPoint,
        this.data.stabilityPoint
      ]
    }
  }
}
</script>

<style scoped>

</style>

